<template>
    <div id="app">
        <keep-alive include="Home,Search,Classify,Goodsdetails">
            <router-view></router-view>
        </keep-alive>

        <van-tabbar v-model="active" @change="changeMenu" route v-if="showTabbar">
            <van-tabbar-item v-for="item in menu" :key="item.path" :to="item.path" :icon="item.icon"
                :badge="item.path==='/cart'?cartlist.length:null">{{ item.text}}</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    export default {
        name: "App",
        data() {
            // let cartlist = JSON.parse(localStorage.getItem("cartlist")) || [];
            return {
                // cartlist,
                showTabbar: true,
                active: 0,
                menu: [
                    {
                        path: "/home",
                        text: "首页",
                        icon: "wap-home-o",
                    },
                    {
                        path: "/classify",
                        text: "分类",
                        icon: "apps-o",
                    },
                    {
                        path: "/cart",
                        text: "购物车",
                        icon: "shopping-cart-o",
                    },
                    {
                        path: "/mine",
                        text: "我的",
                        icon: "user-o",
                    },
                ],
            };
        },

        created() {

        },
        computed: {
            userInfo() {
                // 模块化前
                // return this.$store.state.userInfo;
                // 模块化后
                return this.$store.state.user.userInfo;
            },
            cartlist() {
                // return this.$store.state.cartslist;
                return this.$store.state.cart.cartlist
            },
            // isLogin() {
            //     return this.$store.getters.isLogin;
            // }
        },
        methods: {
            changeMenu(active) {
                // console.log(active);
                // this.active = active;
            },
        },
    };
</script>

<style>
    body,
    html {
        margin: 0;
        padding: 0;
    }
</style>